<script setup lang="ts">
import { Modal } from 'ant-design-vue';

const modal1 = ref(false);
const modal2 = ref(false);
const modal3 = ref(false);

function openConfirm() {
  Modal.confirm({
    type: 'warn',
    content: '内容内容内容内容内容内容内容内容内容内容内容内容内容',
    class: 'ant-cover__confirm-modal',
    centered: true,
  });
}
</script>

<template>
  <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
    <h4 class="mt-0">
      Modal 弹窗
    </h4>

    <AButton @click="modal1 = true">
      打开基础弹窗
    </AButton>
    <AModal v-model:open="modal1" wrapClassName="ant-cover__Modal" title="XXXX" :footer="null" centered>
      <div class="h-60 bg-blue/30" />
      <AInput  />
      <div class="h-60 bg-yellow/30" />
      <div class="h-60 bg-green/30" />
      <div class="h-60 bg-red/30" />
    </AModal>

    <AButton @click="modal2 = true">
      打开 [大屏 Modal 样式，小屏 Drawer 样式] 弹窗
    </AButton>
    <AModal v-model:open="modal2" wrapClassName="ant-cover__Modal-drawer" title="XXXX" centered>
      <div class="h-60 bg-green/30" />
      <div class="h-60 bg-red/30" />
      <AInput  />
    </AModal>

    <!-- 未完成 -->
    <!-- <AButton @click="modal3 = true">
      打开 PopupCard 弹窗
    </AButton>
    <AModal v-model:open="modal3" class="ant-cover__Modal-drawer">
      <template #modalRender>
        <TPopupCard title="XXXXXXXX">
          <div class="h-60 bg-blue/30" />
          <AInput  />
          <div class="h-60 bg-yellow/30" />
        </TPopupCard>
      </template>
    </AModal> -->
  </div>

  <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
    <h4 class="mt-0">
      确认弹窗
    </h4>

    <p class="text-sm text-gray">
      确认弹窗样式调整
    </p>

    <AButton @click="openConfirm">
      打开确认弹窗
    </AButton>
  </div>
</template>
